import React, { memo } from 'react';

import { Pagination } from 'antd';
import { PaginationWrapper } from "./style";

const MyPagination = memo((props) => {
  const { currentPage, total, pageSize, onPageChange } = props;

  // 用于自定义页码的结构
  const itemRender = (page, type, originalElement) => {
    if (type === 'prev') {
      return <button className="control prve"> &lt; 上一页</button>
    }
    if (type === 'next') {
      return <button className="control next">下一页 &gt; </button>
    }
    return originalElement;
  };

  return (
    <PaginationWrapper>
      <Pagination
        className="pagination"
        size="small"
        current={currentPage}
        total={total}
        showSizeChanger={false}
        pageSize={pageSize} 
        onChange={onPageChange} 
        itemRender={itemRender}
      />
    </PaginationWrapper>
  )
})

export default MyPagination